<template>
  <div>
    <el-card>
      <i class="el-icon-search"> 筛选搜索</i>
      <el-form
        :inline="true"
        :model="searchList"
        style="margin-top: 20px"
        ref="formRef"
      >
        <el-form-item label="姓名 :" prop="name">
          <el-input
            placeholder="请输入姓名"
            v-model="searchList.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码 :" prop="phone">
          <el-input
            placeholder="请输入手机号码"
            v-model="searchList.phone"
          ></el-input>
        </el-form-item>
        <el-form-item label="学校 :" prop="school">
          <el-input
            placeholder="请输入学校"
            v-model="searchList.school"
          ></el-input>
        </el-form-item>
        <el-form-item label="学历 :" prop="education">
          <el-select v-model="searchList.education" placeholder="请选择学历">
            <el-option label="专科" value="专科"></el-option>
            <el-option label="本科" value="本科"></el-option>
            <el-option label="硕士" value="硕士"></el-option>
            <el-option label="博士" value="博士"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="岗位 :" prop="postion">
          <el-select v-model="searchList.postion" placeholder="请选择岗位">
            <el-option label="前端工程师" value="前端"></el-option>
            <el-option label="后端工程师" value="后端"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作地 :" prop="addr">
          <el-select v-model="searchList.addr" placeholder="请选择工作地">
            <el-option label="温州" value="温州"></el-option>
            <el-option label="南京" value="南京"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身份 :" prop="identity">
          <el-select v-model="searchList.identity" placeholder="请选择身份">
            <el-option label="实习生" value="实习生"></el-option>
            <el-option label="正式员工" value="正式员工"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态 :" prop="status">
          <el-select v-model="searchList.status" placeholder="请选择状态">
            <el-option label="在职" value="在职"></el-option>
            <el-option label="外出" value="外出"></el-option>
          </el-select>
        </el-form-item>
        <el-form style="float: right">
          <el-button @click="reset()">重置</el-button>
          <el-button type="primary" @click="searchData(searchList)"
            >查询</el-button
          >
        </el-form>
      </el-form>
    </el-card>
    <br />
    <!-- 操作 -->
    <el-card>
      <i class="el-icon-tickets"> 操作</i>
    </el-card>
    <br />
    <!-- 表单区域 -->
    <el-table
      :data="RosterData"
      border
      style="width: 100%"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column
        type="index"
        label="序号"
        width="80px"
        prop="id"
      ></el-table-column>
      <el-table-column label="姓名" width="80px" prop="name"></el-table-column>
      <el-table-column label="手机号码" prop="phone"></el-table-column>
      <el-table-column label="学历" prop="education"></el-table-column>
      <el-table-column label="学校" prop="school"></el-table-column>
      <el-table-column label="岗位" prop="postion"></el-table-column>
      <el-table-column
        label="工作地"
        width="100px"
        prop="addr"
      ></el-table-column>
      <el-table-column label="身份" prop="identity"></el-table-column>
      <el-table-column label="状态" prop="status"></el-table-column>
      <el-table-column label="实习期类型" prop="type"></el-table-column>
      <el-table-column label="mentor" prop="mentor"></el-table-column>
      <el-table-column label="leader" prop="leader"></el-table-column>
      <el-table-column label="技术经理" prop="manager"></el-table-column>
      <el-table-column label="合同签订" prop="iscontract" :formatter="contractf"></el-table-column>
      <el-table-column label="签订日期" width="110px" sortable prop="contracttime"></el-table-column>
      <el-table-column label="宿舍分配" width="50px" prop="ishouse" :formatter="housef"></el-table-column>
      <el-table-column label="入职时间" width="110px" sortable prop="entrytime"></el-table-column>
      <el-table-column label="操作" width="150px">
        <template v-slot="scope">
          <!-- 修改按钮 -->
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="putOne(scope.row)"
          ></el-button>
          <!-- 删除按钮 -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleteData(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[2, 5, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog title="修改信息" :visible.sync="editDialogVisible" width="33%" @close="resetinside">
          <el-form :model="reForm" label-width="110px" :rules="rules" ref="formRef2">
        <el-form-item label="序号 :" prop="id">
          <el-input v-model="reForm.id"></el-input>
        </el-form-item>
        <el-form-item label="姓名 :" prop="name">
          <el-input v-model="reForm.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号 :" prop="phone">
          <el-input v-model="reForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="学历 :" prop="education">
          <el-select v-model="reForm.education" placeholder="请选择学历">
            <el-option label="专科" value="专科"></el-option>
            <el-option label="本科" value="本科"></el-option>
            <el-option label="硕士" value="硕士"></el-option>
            <el-option label="博士" value="博士"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学校 :" prop="school">
          <el-input v-model="reForm.school"></el-input>
        </el-form-item>
        <el-form-item label="岗位" prop="postion">
          <el-select v-model="reForm.postion" placeholder="请选择岗位">
            <el-option label="Java前端开发" value="Java前端开发"></el-option>
            <el-option label="Java后端开发" value="Java后端开发"></el-option>
            <el-option label="软件测试" value="软件测试"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作地" prop="addr">
          <el-select v-model="reForm.addr" placeholder="请选择地区">
            <el-option label="温州" value="温州"></el-option>
            <el-option label="南京" value="南京"></el-option>
            <el-option label="杭州" value="杭州"></el-option>
            <el-option label="上海" value="上海"></el-option>
            <el-option label="北京" value="北京"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身份" prop="identity">
          <el-select v-model="reForm.identity" placeholder="请选择身份">
            <el-option label="实习生" value="实习生"></el-option>
            <el-option label="正式员工" value="正式员工"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="reForm.status" placeholder="请选择状态">
            <el-option label="在职" value="在职"></el-option>
            <el-option label="外出" value="外出"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="实习期类型" prop="type">
          <el-select v-model="reForm.type" placeholder="请选择类型">
            <el-option label="改进期" value="改进期"></el-option>
            <el-option label="正常实习" value="正常实习"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="mentor :" prop="mentor">
          <el-input v-model="reForm.mentor"></el-input>
        </el-form-item>
        <el-form-item label="leader :" prop="leader">
          <el-input v-model="reForm.leader"></el-input>
        </el-form-item>
        <el-form-item label="技术经理 :" prop="manager">
          <el-input v-model="reForm.manager"></el-input>
        </el-form-item>
        <el-form-item label="合同签订 :" prop="iscontract">
          <el-select v-model="reForm.iscontract" placeholder="请选择">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="签订日期 :" prop="contracttime">
          <el-input v-model="reForm.contracttime"></el-input>
        </el-form-item>
        <el-form-item label="宿舍分配 :" prop="ishouse">
          <el-select v-model="reForm.ishouse" placeholder="请选择">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入职时间 :" prop="entrytime">
          <el-input v-model="reForm.entrytime"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editInfo(reForm)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { searchRoster, deleteById, save } from "@/api/roster";
export default {
  data() {
    return {
      RosterData: [],
      editDialogVisible: false,
      listLoading: true,
      total: 0,
      pageNum: 1,
      pageSize: 5,
      //搜索表
      searchList: {
        name: "",
        phone: "",
        school: "",
        education: "",
        postion: "",
        addr: "",
        identity: "",
        status: "",
      },
      // 修改表
      reForm: {
        id: "",
        name: "",
        phone: "",
        education: "",
        school: "",
        postion: "",
        addr: "",
        identity: "",
        status: "",
        type:"",
        mentor:"",
        leader:"",
        manager:"",
        iscontract:"",
        contracttime:"",
        ishouse:"",
        entrytime:""
      },
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            min: 8,
            max: 11,
            message: "长度在 8 到 11 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.load();
  },
  methods: {
    load() {
      fetch(
        "http://localhost:8080/roster/page?pageNum=" +
          this.pageNum +
          "&pageSize=" +
          this.pageSize
      )
        .then((res) => res.json())
        .then((res) => {
          console.log(res);
          this.RosterData = res.data;
          this.total = res.total;
        });
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.load();
    },
    searchData(e) {
      this.listLoading = true;
      console.log(e);
      searchRoster(e).then((res) => {
        console.log(res);
        this.RosterData = res.data.data;
        this.total = res.data.total;
      });
    },
    deleteData(id) {
      this.listLoading = true;
      deleteById(id).then((res) => {
        console.log(res);
        if (res.status == 200) {
          this.$message.success("删除成功");
        } else {
          this.$message.error("删除失败");
        }
        this.load();
      });
    },
    contractf(row) {
      return row.iscontract === 1 ? "是" : "否";
    },
    housef(row) {
      return row.ishouse === 1 ? "是" : "否";
    },
    putOne(resetMessage) {
      this.reForm = resetMessage;
      this.editDialogVisible = true;
    },
    reset() {
      this.$refs.formRef.resetFields();
    },
    resetinside() {
      this.$refs.formRef2.resetFields();
    },
    editInfo(resumeMessage) {
      this.listLoading = true;
      save(resumeMessage).then((res) => {
        console.log(res);
        if (res.status == 200) {
          this.$message.success("修改成功");
        } else {
          this.$message.error("修改失败");
        }
        this.load();
      });
    },
  },
};
</script>

<style scoped>
.div1 {
  position: relative;
  float: right;
  bottom: 10px;
}
.el-form-item {
  margin-left: 50px;
  height: 20px;
}
.el-input {
  width: 200px;
}
</style>
